<template>
    <div class=" spec-preview">
        <!-- 这样直接调用数组，会报假错 因为skuImageList可能没有数据-->
        <!-- <img :src="skuImageList[0].imgUrl"> -->

        <img :src="imgObj.imgUrl">
        <div class="event" @mousemove="handler"></div>
        <div class="big" >
            <img :src="imgObj.imgUrl" ref="big">
        </div>
        <!-- 绿色罩 -->
        <div class="mask" ref="mask"></div>
    </div>

</template>

<script>

export default {
    name: 'ZoomDetails',
    data() {
        return {
            index: 0,

        }
    },
    // 在父组件中计算下skuImageList，可能为数组，可能为undifined,这里需要default下
    props: {
        skuImageList: {
            type: Array,
            default: () => [{}]
        }
    },
    // props:['skuImageList||[]'], //接受数据
    computed: {
        imgObj() {
            return this.skuImageList[this.index] || {}
        }
    },
    mounted() {
        // 得到ImageList 组件的索引值
        this.$bus.$on('getIndex', (index) => {
            this.index = index;
        })
    },
    methods:{
        handler(e){
            let mask = this.$refs.mask;
            let big = this.$refs.big;

            //遮罩到夫组件的距离 = 鼠标距离父组件的距离 - 鼠标到遮罩边的距离
            let left = e.offsetX - mask.offsetWidth/2;
            let top = e.offsetY - mask.offsetHeight/2;

            // 约束遮罩
            if(left<=0) left = 0;
            if(left >= mask.offsetWidth) left = mask.offsetWidth;
            if(top<=0) top = 0;
            if(top >= mask.offsetHeight) top = mask.offsetHeight;

            // 修改遮罩的left和right
            mask.style.left = left+'px';
            mask.style.top = top+'px';

            big.style.left = -2*left+'px';
            big.style.top = -2*top+'px';


        }
    }

}
</script>

<style scoped>
.spec-preview {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;

}

.spec-preview img {
    width: 100%;
    height: 100%;
}

.event {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 998;
}

.mask {
    width: 50%;
    height: 50%;
    background-color: rgba(0, 255, 0, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

.big {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1px;
    left: 100%;
    border: 1px solid #aaa;
    overflow: hidden;
    z-index: 998;
    display: none;
    background: white;
}

.big img {
    width: 200%;
    max-width: 200%;
    height: 200%;
    position: absolute;
    left: 0;
    top: 0;
}

.event:hover~.mask,
.event:hover~.big {
    display: block;
}

</style>
